<template>
	<div class="investigatestyle">
		<!-- 标题 -->
		<h2>{{ datas.text }}</h2>

		<!-- 内容 -->
		<div>
			<p class="info" style="color: #ff0000">
				下拉框，单选，多选等文本用，符号隔开#如：(男#女)
			</p>
		</div>
		<!-- <el-from ref="form" :model="datas" label-width="80px">
      
    </el-from>-->

		<el-form ref="form" label-width="80px" label-position="right" size="small" style="margin-top: 10px">
			<el-form-item label="表单名称">
				<el-input v-model="datas.title"></el-input>
			</el-form-item>

			<!--      添加表单内容-->
			<el-divider>表单配置</el-divider>
			<draggable v-model="datas.jsonData" style="background: #f7f8fa; padding: 10px" animation="300"
				handle=".handle">
				<transition-group>
					<div v-for="(item, idx) in datas.jsonData" :key="'dragItem' + idx"
						style="margin-bottom: 5px ; padding: 10px; background: white;border-radius:5px" inset>
						<div style="height: 25px;margin-bottom: 5px">
							<el-button type="primary" link style="float: left; padding: 3px 0;cursor:move"
								class="el-icon-menu handle"><span style="margin-left: 5px">拖拽</span></el-button>
							<el-button type="primary" link style="float: right; padding: 3px 0"
								@click="deletetext(idx)">删除</el-button>
						</div>
						<el-form-item label="模块名称">
							<el-input v-model="item.name" placeholder="表单模块名称"></el-input>
						</el-form-item>
						<el-form-item label="模块类型">
							<el-select v-model="item.type" placeholder="请选择显示格式" @change="conChange(idx)">
								<el-option :label="item" :value="index" v-for="(item, index) in selecttext"
									:key="index"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="提示语句">
							<el-input v-model="item.value" placeholder="提示语句如:(请输入姓名)"></el-input>
						</el-form-item>

						<el-form-item label="选项" v-if="item.type != 0 ">
							<el-input type="textarea" v-model="item.columns"
								@input="item.value1 = item.columns.split('#');item.value1.unshift('请选择')"
								placeholder="多项之间用‘#’逗号隔开"></el-input>
						</el-form-item>
					</div>
				</transition-group>
			</draggable>


			<el-button @click="addText" class="uploadImg" type="primary" plain round size="medium"
				style="width: 100% ; margin-top: 10px">
				<i class="el-icon-plus" />点击添加内容
			</el-button>

		</el-form>
	</div>
</template>

<script>
	import draggable from 'vuedraggable'

	export default {
		name: 'investigatestyle',
		components: {
			draggable
		},
		props: {
			datas: Object,
		},
		data() {
			return {
				selecttext: ['文本', '下拉框'],
			}
		},
		mounted() {},
		methods: {
			//添加文本
			addText() {
				console.log(this.datas.jsonData)
				var text = {
					name: '',
					type: '',
					value: '', // 提示语
					value1: [], //集合
					columns: '', //集合字符串
					value2: '', //值
					showPicker: false,
				}
				this.datas.jsonData.push(text)
			},
			//删除文本
			deletetext(index) {
				this.datas.jsonData.splice(index, 1)
			},
			//下拉内容改变发生发生事件
			conChange(index) {
				this.datas.jsonData[index].columns = ''
				this.datas.jsonData[index].value1 = []
			},
		},
	}
</script>

<style scoped lang="less">
	.investigatestyle {
		width: 100%;
		position: absolute;
		left: 0;
		top: 0;
		padding: 10px;
		box-sizing: border-box;
	}

	h2 {
		padding: 24px 16px 24px 0;
		margin-bottom: 15px;
		border-bottom: 1px solid #f2f4f6;
		font-size: 18px;
		font-weight: 600;
		color: #323233;
	}

	.ghostClass {
		background-color: blue !important;

	}

	// ::v-deep .el-input__inner{
	//   padding: 0 5px;
	// }
</style>